<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <h1>
        点击
    </h1>
    <h1>
        点击
    </h1>
    <h1>
        点击
    </h1>
</body>
<script src="./js/jq.js"></script>
<!-- 选择器的库 -->
<script src="./js/sizzle.js"></script>
<script>

    function jQuery(selector) {

        return new jQuery.prototype.init(selector);
    }
    // 设置别名   目的是使用方便；
    jQuery.fn = jQuery.prototype
    //通过在原型上添加函数 来充当构造函数
    jQuery.prototype.init = function (selector) {
        if (typeof selector == 'object') {
            // 向 this 中添加DOM
            // this 是一个伪数组  所以不能this.push  [].push.call(this) 等于说是向this里添加了selector  
            [].push.call(this, selector)
            // this=selector
        } else if (typeof selector == 'string') {
            // console.log(selector)
            // 在这里传入了一个选择器，通过这个选择器可以实现DOM元素的获取
            Sizzle(selector, document, this)
        }
        return this;

    }
    //设置别名
    jQuery.prototype.init.prototype = jQuery.fn
    jQuery.fn.css = function (attr, val) {
        //给誰设置样式
        var nodes = Array.from(this);

        nodes.forEach(function (v) {
            v.style[attr] = val;
        })
        return this;
    }
    jQuery.fn.on = function (type, cb) {
        console.log(this)
        // 为谁添加事件？
        // 为获得到的 DOM 添加，DOM被放到this

        // 将 this 这个伪数组变成真数组
        // 可以通过Array.from

        // nodes是纯数组
        var nodes = Array.from(this);
        nodes.forEach(function (val) {
            console.log(val)
            val.addEventListener(type, function () {
                console.log('你点击了我')

                // 改变this的指向
                cb.call(this)
            })

        })
    }
    var $ = jQuery;
    $('h1')
    // console.log($('h1'))
    $('h1').on('click', function () {
        console.log($(this));
        $(this).css('color', 'red').css('fontSize','50px')
    })


</script>

</html>